<html>
  <head>
    <link type="text/css" rel="stylesheet" href="/stylesheets/main.css" />
    <script type="text/javascript">
    
    var bookchaps = [];
    bookchaps[1] = 50;
    bookchaps[2] = 40;
    bookchaps[3] = 27;
    bookchaps[4] = 36;
    bookchaps[5] = 34;
    bookchaps[6] = 24;
    bookchaps[7] = 21;
    bookchaps[8] = 4;
    bookchaps[9] = 31;
    bookchaps[10] = 24;
    bookchaps[11] = 22;
    bookchaps[12] = 25;
    bookchaps[13] = 29;
    bookchaps[14] = 36;
    bookchaps[15] = 10;
    bookchaps[16] = 13;
    bookchaps[17] = 10;
    bookchaps[18] = 42;
    bookchaps[19] = 150;
    bookchaps[20] = 31;
    bookchaps[21] = 12;
    bookchaps[22] = 8;
    bookchaps[23] = 66;
    bookchaps[24] = 52;
    bookchaps[25] = 5;
    bookchaps[26] = 48;
    bookchaps[27] = 12;
    bookchaps[28] = 14;
    bookchaps[29] = 3;
    bookchaps[30] = 9;
    bookchaps[31] = 1;
    bookchaps[32] = 4;
    bookchaps[33] = 7;
    bookchaps[34] = 3;
    bookchaps[35] = 3;
    bookchaps[36] = 3;
    bookchaps[37] = 2;
    bookchaps[38] = 14;
    bookchaps[39] = 4;
    bookchaps[40] = 28;
    bookchaps[41] = 16;
    bookchaps[42] = 24;
    bookchaps[43] = 21;
    bookchaps[44] = 28;
    bookchaps[45] = 16;
    bookchaps[46] = 16;
    bookchaps[47] = 13;
    bookchaps[48] = 6;
    bookchaps[49] = 6;
    bookchaps[50] = 4;
    bookchaps[51] = 4;
    bookchaps[52] = 5;
    bookchaps[53] = 3;
    bookchaps[54] = 6;
    bookchaps[55] = 4;
    bookchaps[56] = 3;
    bookchaps[57] = 1;
    bookchaps[58] = 13;
    bookchaps[59] = 5;
    bookchaps[60] = 5;
    bookchaps[61] = 3;
    bookchaps[62] = 5;
    bookchaps[63] = 1;
    bookchaps[64] = 1;
    bookchaps[65] = 1;
    bookchaps[66] = 22;

    
    function changeChaps() {

      chapselect = document.getElementById("chapslist");
      booklist = document.getElementById("booklist");
      thebookencoded = parseInt(booklist.value); 
      thebook = Math.floor(thebookencoded / 1000);
      chapno = bookchaps[thebook];   
      removeAllOptions(chapselect);
      defaultchap = thebookencoded % 1000;
      for (i = 1; i <= chapno; i++) {
         addOption(chapselect, "Chapter " + i, i, defaultchap);
      }    
    }
    
    function toggleaddnote() {
        p = document.getElementById("addnoteform");
        trol = document.getElementById("addnoteformcontrol");
        if (p.style.display == 'none') {
            p.style.display = '';
            trol.innerHTML = 'Hide note composer';
        } else {
            p.style.display = 'none';
            trol.innerHTML = 'Compose a Note';
        }
    }
    
    function addOption(selectbox, text, value, selectvalue)
    {
      var optn = document.createElement("OPTION");
      optn.text = text;
      optn.value = value;
      if (value == selectvalue) {
        optn.setAttribute("selected","selected");
      }
      selectbox.options.add(optn);
    }
    
    function removeAllOptions(selectbox)
    {
       var i;
       for(i=selectbox.options.length-1;i>=0;i--)
       {
          selectbox.remove(i);
       }
    } 
    </script>
    
  </head>

  <body onload="toggleaddnote()">
  
  <div id="wrap">
    <div id = "header">
      <div id="title">
        <img src="/images/SmallRomanCordoba.JPG" alt="Roman Arch" />
        Romans-8
      </div>

    </div>
    
    <div id="main">
    {% for chap in chapters %}
      <h2 align=center>{{ thebookname }} {{ chap.chapno }}</h2>
      <div class="transtext">({{ transtext }} translation. Public domain.)</div>
      <p>
      {{ chap.content }}
    {% endfor %}
    </div>
          <div id="navbar">
      <a href="/" align=right>Intro</a>
      <a href="{{ url }}" align=right>{{ url_linktext }}</a>
      </div>
    <div id="notes">


    
    
         <form>
             <div align="right" id="transselect">
               <select class="selectcontrol" name="trans" size="1">
                    {% for trans in translist %}
                      <option value="{{ trans }}"
                          {% ifequal trans thetrans %}
                              selected
                          {% endifequal %}
                      >{{ trans }}</option>
                    {% endfor %}
               </select>
             </div>
               <select class="selectcontrol" name="book" size="1" id="booklist"
                                                     onChange="changeChaps();">
                    {% for book in booklist %}
                      <option value={{ book.bookno }} 
                          {% ifequal book.bookno thebook %}
                              selected
                          {% endifequal %}
                      >{{ book.bookname }}      ({{ book.defaultchap }})</option>
                    {% endfor %}
               </select>
               <select class="selectcontrol" name="chap" size="1" id="chapslist">
                    {% for chap in chaplist %}
                      <option value={{ chap }} id="chap{{ chap }}"
                          {% ifequal chap thechapno %}
                              selected
                          {% endifequal %}
                      >Chapter {{ chap }}</option>
                    {% endfor %}
               </select>
               <div><input type="submit" value="Get Chapter"></div>
               <div class="controlword" id="addnoteformcontrol" onClick="toggleaddnote()" align=center
                        onmouseover="this.style.background='#f6fff2';"
                        onmouseout= "this.style.background='#f0f8e0';"
                         >Compose a Note</div>
      </form>
      
            <div>
          <form action="/addnote" method="post" width="100%" display="none"  id="addnoteform" display="none">
            <table>

             <tr>
                <td><span class="label">vs</span></td>
                <td><INPUT type="text" name="vstart" size="2"></td>
                <td> - </td> 
                <td><INPUT type="text" name="vfinish" size="2"></td>
                <td>&nbsp &nbsp &nbsp &nbsp</td>
                <td>Shared? <INPUT type="checkbox" name="sharing" value="1"><BR></td>
             </tr>
           </table>
           <div align="right"><input type="submit" class="btn" value="Add Note"></div>
           <div width="100%"><textarea name="content" rows="30" cols=32></textarea></div>

         </form>
      </div>
    <b>Notes:</b>
    {% for note in notes %}
      <div id="notebody">
      
        <div id="notecontent">
        #{{ note.opusno}} (v:{{ note.start }}-{{ note.finish }}) {{ note.content }}
        </div>
      </div>
    {% endfor %}   
    </div>
    
    
    
    <div id="footer">
    <div>
  </div>
  </body>
</html>
